<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>

</body>
<script>
    /**
     * d3.color(specifier)          析指定的CSS颜色并返回RGB或HSL颜色
     * color.opacity                不透明度值
     * color.rgb()                  rgb值
     * color.toString()             颜色的字符串
     * color.displayable()          是否显示
     * d3.rgb(color)                构造新的RGB颜色
     * d3.hsl(color)                构造新的HSL颜色
     * d3.lab(color)                构造新的Lab颜色
     * d3.hcl(color)                构造新的HCL颜色
     * d3.cubehelix(color)          构造新的Cubehelix颜色
    */
    let color = d3.color("red")
    console.log("=============== d3 color =================")
    console.log(color)
    console.log(color.opacity)
    console.log(color.rgb())
    console.log(color.toString())
    console.log(color.displayable())
    console.log("=============== d3 =================")
    console.log(d3.color("red"))
    var hsl = d3.hsl("blue");
    console.log(hsl);
    var lab = d3.lab("blue");
    console.log(lab);
    var hcl = d3.hcl("blue");
    console.log(hcl);
    var cubehelix = d3.cubehelix("blue");
    console.log(cubehelix);
</script>

</html>